<template>
  <basic-container>

    <cs-filter-query ref="csFilterQueryRef" :options="filterQueryOptions" @change="handleChangeFilter">
    </cs-filter-query>

    <!--    筛选条件-->
    <el-form v-model="StatusSelection" style="width:220px" label-width="80px">
      <el-form-item label="开户状态">
        <el-select v-model="StatusSelection.checked1" clearable size="mini" @change="newStatus">
          <el-option v-for="item in statusList" :label="item.label" :key="item.value" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <!--    表格列-->
    <div class="curd-table" style="margin-top: 0">
      <div class="tab-header clearfix">
        <div class="tab-header-right" style="margin-right: 30px">
          <el-tooltip class="item" effect="dark" content="刷新" placement="top">
            <el-button icon="el-icon-refresh" size="mini" circle @click="uploadAccount"></el-button>
          </el-tooltip>
        </div>
      </div>
      <div class="table-body">
        <el-table
          v-loading="loading"
          :data="AccountList"
          border
          :header-cell-style="iHeaderCellStyle"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <!--          <el-table-column-->
          <!--            type="selection"-->
          <!--            width="34">-->
          <!--          </el-table-column>-->
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center">
          </el-table-column>
          <el-table-column prop="customerName" label="客户简称" width="180"
                           :show-overflow-tooltip='true'></el-table-column>
          <el-table-column
            prop="entityName"
            label="主体名称"
            width="180"
            :show-overflow-tooltip='true'>
          </el-table-column>
          <el-table-column
            prop="productName"
            label="产品名称"
            :show-overflow-tooltip='true'>
          </el-table-column>
          <el-table-column
            prop="status"
            label="开户状态"
            width="100"
            :show-overflow-tooltip='true'>
            <template v-slot="{row}">
              {{ findStatus(row.status) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="platform"
            label="媒体"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="rejectReason"
            label="拒绝原因"
            width="100"
            :show-overflow-tooltip='true'
          >
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="accountId"-->
          <!--            label="账户时区"-->
          <!--            width="120">-->
          <!--          </el-table-column>-->
          <!--          <el-table-column-->
          <!--            prop="registeredArea"-->
          <!--            label="主体注册地"-->
          <!--            width="100"-->
          <!--            :show-overflow-tooltip='true'>-->

          <!--          </el-table-column>-->

          <el-table-column
            prop="number"
            label="开户数量"
            width="100">
            <!--            <template v-slot="{row}">-->
            <!--            </template>-->
          </el-table-column>
          <el-table-column
            prop="createUser"
            label="创建人"
            width="100"
            :formatter="formatterUserName"
            :show-overflow-tooltip='true'>
            <!--            <template v-slot="{row}">-->
            <!--            </template>-->
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="licenseNo"-->
          <!--            label="营业执照编号"-->
          <!--            :show-overflow-tooltip='true'>-->
          <!--            &lt;!&ndash;            <template v-slot="{row}">&ndash;&gt;-->
          <!--            &lt;!&ndash;              {{ findUser(row.createUser) }}&ndash;&gt;-->
          <!--            &lt;!&ndash;            </template>&ndash;&gt;-->
          <!--          </el-table-column>-->
          <el-table-column prop="team" label="团队" :show-overflow-tooltip='true'>
            <template v-slot="{row}">
              {{ findDept(row.team) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            width="100"
            :show-overflow-tooltip='true'>
          </el-table-column>
          <el-table-column
            prop="auditTime"
            label="审核完成时间"
            width="100"
            :show-overflow-tooltip='true'>
          </el-table-column>

          <el-table-column
            label="操作" width="100" align="center" fixed="right">
            <template v-slot="{row}">
              <el-tooltip content="查看" placement="top">
                <el-button size="small" icon="el-icon-view" type="text" @click="showRequirement(row)"></el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="审核" placement="top">
                <el-button v-if="row.platform=='tiktok'"  icon="el-icon-edit" type="text" @click="editOrCopyReport(row)" :disabled="row.status !== 1"></el-button>
                <el-button v-else  icon="el-icon-edit" type="text" @click="editOrCopyReport(row)" :disabled="[2,4,5].includes(row.status)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bottom-page clearfix">

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!--  查看，审核-->
    <el-drawer
      v-loading="loading"
      :title="drawerTitle"
      size="830px"
      :visible.sync="drawerSwitch"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :append-to-body="true"
      :wrapperClosable="false"
    >
      <el-divider></el-divider>

      <div style="margin-left: 20px;margin-bottom: 20px" v-show="drawerTitle==='查看'">开户信息</div>
      <cs-drawer-container>
        <el-form ref="reportForm" class="add-form" label-width="100px">
          <el-row>
            <!--开户媒体-->
            <el-col :span="12">
              <el-form-item label="开户媒体：" prop="platform">
                <el-input v-model="datailForm.platform" size="mini" placeholder="请输入内容" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!--公共字段-->
          <el-row>
            <el-col :span="12">
              <el-form-item label="公司简称：" prop="customerName">
                <!--                {{datailForm.customerName}}-->
                <el-select size="mini" v-model="datailForm.customerName" clearable filterable
                           @change="changeFullName(reportForm.customerName)"
                           disabled>
                  <!--                  <el-option v-for="(item,index) in customerList" :key="index" :value="item.label" :label="item.label">-->
                  <!--                  </el-option>-->
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"  v-if="datailForm.platform !== 'google'">
              <el-form-item label="主体名称：" prop="customerFullName">
                <el-input v-model="datailForm.entityName" size="mini" placeholder="请输入内容" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="推广链接：" prop="appLink" clearable>
                <el-input v-model="datailForm.appLink" size="mini" placeholder="请输入"
                          disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="datailForm.platform == 'facebook'">
              <el-form-item label="链接地域限制：" prop="geoLimit" label-width="140px" >
                <el-radio-group v-model="datailForm.geoLimit" disabled>
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="datailForm.platform == 'facebook'">
              <el-form-item label="APP ID："prop="facebookAppId" >
                <el-input
                  v-model="datailForm.fbAppId" disabled
                  size="mini"
                  clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="datailForm.platform != 'kwai'">
              <el-form-item label="账户时区：" prop="timezone">
                <el-select size="mini" v-model="datailForm.timezone" clearable filterable
                           disabled>
                  <el-option v-for="(item,index) in timeZoneList" :key="index" :value="item.dictKey" :label="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="['facebook','google'].includes(datailForm.platform)">
              <el-form-item label="开户类型：" prop="accountType" >
                <el-select v-model="datailForm.accountType"   disabled size="mini">
                  <el-option label="国内代理" value="国内代理"></el-option>
                  <el-option label="海外代理-阿根廷" value="海外代理-阿根廷"></el-option>
                  <el-option label="海外代理-尼日利亚" value="海外代理-尼日利亚"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="['tiktok','kwai','bigo'].includes(datailForm.platform)">
              <el-form-item :label="registeredAreaName" prop="registeredArea">
                <el-select size="mini" v-model="datailForm.registeredArea"  disabled  :multiple="multiple">
                  <el-option v-for="(item,index) in areaList" :key="index"  :value="item.dictKey"
                             :label="item.dictValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="账户命名：" prop="baseName">
                <el-input v-model="datailForm.baseName" size="mini" placeholder="格式：ads4each-产品名称-公司简称"
                          disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户数量：" prop="number">
                <el-input type="number" v-model="datailForm.number" size="mini" disabled>USD
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="币种：" prop="currency">
                <el-input  v-model="datailForm.currency" size="mini" disabled>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="datailForm.platform != 'google'">
              <el-form-item label="执照编号：" prop="licenseNo">
                <el-input v-model="datailForm.licenseNo" size="mini" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="充值金额：" prop="prepareRechargeAmount">
                <div style="display:inline-flex ">
                  <el-input type="number"
                            v-model="datailForm.prepareRechargeAmount" size="mini"
                            disabled></el-input>
                  <span>&nbsp;&nbsp;{{datailForm.currency}}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="['tiktok','bigo'].includes(datailForm.platform)">
              <el-form-item label="账户行业：" prop="industry">
                <el-input size="mini" v-model="datailForm.industry"
                          disabled>
                </el-input>
              </el-form-item>
            </el-col>
            <div v-if="datailForm.platform=='kwai'" class="cascader">
              <el-col :span="12" >
                <el-form-item label="账户行业:" prop="industry" >
                  <el-cascader
                    v-model="datailForm.industry"
                    disabled
                    style="width: 100%"
                    size="mini"
                    popper-class="popper"
                    placeholder="请选择账户行业"
                    :options="kwaiIndustryList"
                    :props="{value:'dictKey',label:'dictValue',checkStrictly: true,expandTrigger:'hover'}"
                    filterable></el-cascader>
                </el-form-item>
              </el-col>
            </div>
            <el-col :span="12">
              <el-form-item label="开户状态:">
                {{ findStatus(datailForm.status) }}
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="['facebook','google'].includes(datailForm.platform)">
              <el-form-item label="备注：" >
                <el-input type="textarea" v-model="datailForm.remarks" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="13" v-if="datailForm.platform != 'google'">
              <el-form-item label="营业执照：" prop="licenseImage">
                <div class="rightullidiv" >
                  <img   :src="datailForm.licenseImage"  class="rightulliimg"/>
                  <i class="el-icon-download" style="left: 25%;" @click="licenseImageDownload(datailForm.licenseImage)"></i>
                  <i class="el-icon-zoom-in" style="right: 25%;" @click="enlargeImage(datailForm.licenseImage)"></i>

                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="datailForm.platform == 'bigo'">
              <el-form-item label="附件：" prop="annex" disabled>
                <div class="annexDemo" v-show="this.datailForm.annexList.length != 0">
                  <div class="rightullidiv"  v-for="(item, index) in this.datailForm.annexList" >
                    <img   :src="item"  class="rightulliimg"/>
                    <i class="el-icon-download" style="left: 25%;" @click="licenseImageDownload(item)"></i>
                    <i class="el-icon-zoom-in" style="right: 25%;" @click="enlargeImage(item)"></i>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="datailForm.platform == 'facebook'">
              <el-form-item label="含网址的网站截图：" prop="websiteScreenshot" label-width="140px">
                <div class="rightullidiv"  v-show=" this.datailForm.geoLimit == 1">
                  <img   :src="datailForm.websiteScreenshot"  class="rightulliimg"/>
                  <i class="el-icon-download" style="left: 25%;" @click="licenseImageDownload(datailForm.websiteScreenshot)"></i>
                  <i class="el-icon-zoom-in" style="right: 25%;" @click="enlargeImage(datailForm.websiteScreenshot)"></i>
                </div>
              </el-form-item>
            </el-col>

          </el-row>
          <div style="margin-left: 20px;margin-bottom: 20px" v-show="drawerTitle==='审核'">代理审核</div>
          <el-row v-show="drawerTitle==='审核'" style="margin-left: 20px">
            <el-col :span="4">
              <el-radio v-model="radio" label='3'>媒体审核</el-radio>
            </el-col>
            <el-col :span="4">
              <el-radio v-model="radio" label='2'>审核拒绝</el-radio>
            </el-col>
            <el-col :span="3">
              <el-radio v-model="radio" label='4' v-show="datailForm.platform != 'tiktok'">媒体通过</el-radio>
            </el-col>
              <el-col   v-show="radio==='3' && datailForm.platform == 'tiktok'">
                <p>指定商务中心:</p>
                <el-select v-model="bcId" placeholder="请选择" style="width: 30%" size="mini" required="true">
                  <el-option
                    placeholder="请输入bc_id"
                    v-for="(item,index) in bcIdList"
                    :key="index"
                    :label="item.bcName"
                    :value="item.bcId">
                  </el-option>
                </el-select>
              </el-col>
            <el-col :span="14">
              <el-input
                v-show="radio==='2'"
                type="textarea"
                :rows="2"
                placeholder="请输入拒绝原因"
                v-model.trim="rejectReason">
              </el-input>
            </el-col>
            <el-col :span="20">
              <el-form
                v-show="radio==='4'"
                ref="auditForm"
                class="customer-form"
                :model="auditForm"
                :inline="true"
                label-suffix=":"
              >
                <div v-for="(item, index) in auditForm.dynamicItem" :key="index">
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="账户名称" class="form-style"  :required="index == 0">
                        <el-input v-model.trim="item.account_name" size="mini" class="special-style" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                      <el-form-item label="账户id" class="form-style"  :required="index == 0">
                        <el-input v-model.trim="item.account_id" size="mini" class="special-style" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                      <el-form-item label="代理" class="form-style"  :required="index == 0">
                        <el-input v-model.trim="item.agency_name" size="mini" class="special-style" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-form>
            </el-col>
          </el-row>

          <div style="margin-left: 20px;margin-bottom: 20px" v-show="drawerTitle==='查看'">账户信息</div>
          <div style="margin-left:50px " v-show="drawerTitle==='查看'">
            <el-table
              :data="datailForm.tableData"
              center
              style="width: 100%;">
              <el-table-column
                prop="account_name"
                label="账户名称"
                width="180">
              </el-table-column>
              <el-table-column
                prop="account_id"
                label="账户ID">
                <template v-slot="{row}">
                  {{ row.account_id == -1 ? '' : row.account_id }}
                </template>
              </el-table-column>
              <el-table-column
                prop="agency_name"
                label="代理">
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
              >
                <template v-slot="{row}">
                  {{ findStatus(row.status) }}
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div style="margin-left: 20px;margin-bottom: 20px;margin-top: 30px" v-show="drawerTitle==='查看'">节点记录</div>
          <div style="margin-left:50px " v-show="drawerTitle==='查看'">
            <el-table
              :data="recordNode"
              center
              style="width: 100%;">
              <el-table-column
                prop="status"
                label="状态"
               >
                <template v-slot="{row}">
                  {{ findStatus(row.status) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="updateTime"
                label="操作时间"
               >
              </el-table-column>
              <el-table-column
                prop="operatorName"
                label="操作人"
               >
              </el-table-column>
            </el-table>
          </div>

        </el-form>

        <template v-slot:bottom>
          <!--          <el-button type="warning" size="mini" @click="submit" :disabled="btnLock">提交审核</el-button>-->
          <el-button type="primary" size="mini" @click="save1">保存</el-button>
          <el-button type="primary" size="mini" @click="cancel">取消</el-button>
        </template>
      </cs-drawer-container>
    </el-drawer>
    <!--    图片预览弹框-->
    <el-dialog title="图片预览" width="30%" append-to-body :visible.sync="imgDialog">
      <img width="100%" :src="previewUrl" alt/>
    </el-dialog>
  </basic-container>
</template>

<script>
import FileSaver from "file-saver"
import CsDrawerContainer from "@/components/CsDrawerContainer/CsDrawerContainer";
import {
  getTimingReportConfig,
  getTimingReportList,
  removeTimingReportByIds,
  submitTimingReportConfig
} from "@/api/system/timing-report-config";
import {getOfferList} from "@/api/business/offer";
import _ from 'lodash'
import {getCreateUser} from "@/api/system/operationLog";
import CsFilterQuery from '@/components/CsFilterQuery/CsFilterQuery'
import uploadObs from "@/components/beetles-upload/upload_obs";

import {getAccountList, auditSubmit} from "@/api/mediaOperation/account"
import {getBcSelectList} from "@/api/system/businessConfig";

import creativeUploadProdObs from "@/components/beetles-upload/creative_upload_prod_obs";

import {selectAll} from "@/api/business/customer";
import {getCustomer} from "@/api/dataReport/cost-report-new";
import {getAllUser} from "@/api/user";
import {getGeoList} from "@/api/system/dict";
import {
  getTiktokIndustry,
  getBigoIndustryList,
  getRecordNodeList,
  getTimeZone,
  getKwwaiIndustryList,
  getTiktokGeoList, getBigoGeoList, getKwaiGeoList
} from "@/api/accountOrTransfer/account";
import {openWindow} from '../../util/util';
import {getDeptList,getWorkrooms} from "../../api/accountOrTransfer/account";


export default {
  name: "account",
  components: {
    CsDrawerContainer,
    CsFilterQuery,
    uploadObs,
    creativeUploadProdObs
  },
  data() {
    return {
      //商务中心id
      bcId:'',
      //预览弹框
      imgDialog:false,
      //图片预览路径
      previewUrl:'',
      StatusSelection: {
        checked1: "",
      },
      auditForm: {
        dynamicItem:[

        ]
      },
      auditFormRules:{//台账信息表单验证规则
        account_id:[
          { required: true, message: '请填写账户id', trigger: 'blur' },

        ],
        account_name: [
          { required: true, message: '请填写账号名称', trigger: 'blur' },
        ],
        agency_name: [
          { required: true, message: '请填写代理', trigger: 'blur' },
        ]
      },
      loading: true,
      timeZoneList: [],
      deptList: [],
      AccountList: [],
      // selectList:[],
      // customerList:[],
      // timeZoneList:[],
      nationList:[],
      industryList: [],
      ttIndustryList: [],
      bigoIndustryList: [],
      kwaiIndustryList:[],
      // currencyList:[],
      // drawerTitle:'',
      rejectReason: '',
      // status:null,
      detailAccountList: [],
      recordNode: [],
      //所有用户
      allUserList:[],
      //
      tagsLength: 0,
      // drawer: false,
      // direction: 'rtl',
      statusList: [
        {value: 0, label: '草稿'},
        {value: 1, label: '代理预审中'},
        {value: 2, label: '代理拒绝'},
        {value: 3, label: '媒体审核中'},
        {value: 4, label: '媒体通过'},
        {value: 5, label: '媒体拒绝'},
        {value: 6, label: '部分通过'},
      ],
      // otherStatusList: [
      //   {value: 0, label: '草稿'},
      //   {value: 1, label: '代理预审中'},
      //   {value: 3, label: '媒体审核中'},
      //   {value: 4, label: '媒体通过'},
      //   {value: 5, label: '媒体拒绝'},
      // ],
      registeredAreaName:'主体注册地',
      // 工作室媒体数据
      mediaList:[
        {
          value: 'tiktok',
          label: 'Tiktok'
        },
        {
          value: 'facebook',
          label: 'Facebook'
        },
        {
          value: 'google',
          label: 'Google'
        },
        {
          value: 'kwai',
          label: 'Kwai'
        },
        {
          value: 'bigo',
          label: 'BigoAds'
        },
      ],
      studioList:[
        {
          value: 0,
          label: 'EGM'
        },
        {
          value: 1,
          label: 'BPC'
        },
        {
          value: 2,
          label: 'BOP'
        },
        {
          value: 3,
          label: 'MOT'
        },
        {
          value: 4,
          label: 'GLG'
        },
      ],

      // loading: true,
      radio: '3',

      query: {},
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      // 新增报告弹窗
      drawerSwitch: false,
      //查看
      drawerSwitch1: false,
      //编辑
      drawerSwitch2: false,
      // 弹窗表头
      drawerTitle: '',
      // 订单列表
      offerList: [],
      createUserList: [],
      //投放地区
      ttNationList: [],
      bigoNationList: [],
      kwaiNationList: [],
      areaList:[],
      multiple:false,
      // 新增添加表单

      datailForm: {
        id: '',
        customerName: '',
        customerId: 1,
        customerFullName: '',
        timezone: '',
        registeredArea: [],
        baseName: '',
        number: 1,
        licenseNo: '',
        money: '',
        appLink: '',
        industry: '',
        tableData: [],
        radio: 0,
        licenseImage: '',
        prepareRechargeAmount: '',
        status: '',
        entityName: '',
        //开户媒体
        platform: '',
        //推广链接是否又地域限制
        geoLimit:0,
        //FacebookID
        fbAppId:'',
        //含网址的网站截图
        websiteScreenshot:'',
        //开户类型
        accountType:'国内代理',
        // 备注
        remarks:'',
        //币种
        currency:'',
        //附件
        annexList:[]
      },
      // 表格多选
      multipleSelection: [],
      //
      btnLock: false,
      // 是否编辑
      isEdit: false,
      // 预览
      previewDialog: false,
      // 当前账户下可选用户
      userList: [],
      //bc_id列表
      bcIdList:[]
    }
  },

  async created() {
    // await this.getAccountList()
    await this.getNation()
    await this.getUser()
  },

  methods: {
    //获取Bc列表
    getBcSelect(){
      getBcSelectList().then((res) => {
        this.bcIdList=res.data.data
      });
    },
    //图片下载
    licenseImageDownload(url){
      var filename = this.datailForm.entityName;
      var urltype = url.split('.')
      const promise = this
        .downloadUrlQiniu(
          url
        )
        .then((res) => {
          var blob = new Blob([res]);
          FileSaver.saveAs(
            blob,
            filename + '.'  + urltype[urltype.length - 1]
          );

        })
        .catch((error) => {
          console.log(error)
        });

    },
    downloadUrlQiniu(url) {
      return new Promise((resolve, reject) => {
        if (!url.startsWith("http")) {
          return;
        }
        if (!url.startsWith("https")) {
          let urlArr = url.split("://");
          if (urlArr.length < 2) {
            return;
          }
          url = "https://" + urlArr[1];
        }
        // url = getCrossUrl(url)
        fetch(url, {
          method: "GET",
          headers: {
            "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
          },
        })
          .then((res) => {
            resolve(res.blob());
          })
          .catch((err) => {
            reject(err);
          });
      });
    },

    download(href, name) {
      let eleLink = document.createElement('a')
      eleLink.download = name
      eleLink.href = href
      eleLink.click()
      eleLink.remove()
    },

    //图片放大
    enlargeImage(url){
      this.imgDialog=true;
      this.previewUrl=url
    },
    //新增审核订单
    addItem(length) {
      if (length + 1 > this.datailForm.number) {
        this.$message({
          type: 'warning',
          message: '不能大于开户数量！'
        })
      } else {
        this.auditForm.dynamicItem.push({
          name: '',
          phone: '',
          address: ''
        })
      }
    },
    //审核同上按钮
    sameAbove(){
      if (length + 1 > this.datailForm.number) {
        this.$message({
          type: 'warning',
          message: '不能大于开户数量！'
        })
      } else {
        this.auditForm.dynamicItem.push(this.auditForm.dynamicItem[this.auditForm.dynamicItem.length - 1])
      }
    },
    //删除审核表单项
    removeAudit(index){
      this.auditForm.dynamicItem.splice(index,1)
    },
    newStatus() {
      this.query.status = this.StatusSelection.checked1
      // this.query=this.checked1 ? {status:0} : ''
      this.getAccountList()
    },
    openImage() {
      openWindow(this.datailForm.licenseImage, "查看")
    },
    handleChangeFilter(val) {

      this.query = val
      console.log(this.query)
      this.page.current = 1
      this.getAccountList();
    },


    findUser(val) {
      try {
        return this.createUserList.find(item => item.id === val)['realName']
      } catch (e) {
        return ''
      }
    },
    findStatus(val) {
      try {
        return this.statusList.find(item => item.value === val)['label']
      } catch (e) {
        return ''
      }
    },
    // tabelfindStatus(val){
    //   console.log(val)
    //    if (val.platform == 'tiktok'){
    //     return this.statusList.find(item => item.value === val.status)['label']
    //   }else if(val.platform != 'tiktok'){
    //     // return this.otherStatusList.find(item => item.value === val.status)['label']
    //   }else{
    //     return ''
    //   }
    // },
    changeFullName(val) {
      this.reportForm.customerFullName = this.customerList.find(item => item.label === this.reportForm.customerName)['fullName']
    },
    async uploadAccount() {
      this.loading = true
      await this.getAccountList().finally(() => this.loading = false)
    },

    submitAccount() {
    },

    iHeaderCellStyle() {
      return {
        color: '#101010',
        backgroundColor: '#F2F2F2'
      }
    },
    async getUser(){
      const res = await getAllUser({statusList: '0,1,2', isAll: true})
      this.allUserList = res.data.data
    },
    // 账户名称
    formatterUserName(row, column, cellValue, index) {
      const temp = this.allUserList.find(item => item.id === cellValue)
      if (temp === undefined) {
        return ''
      } else {
        return temp.realName
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => item.id);
    },
    handleSizeChange(val) {
      this.page.size = val
      this.getAccountList()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.getAccountList()
    },

    async showRequirement(row) {
      console.log(row)
      this.datailForm.registeredArea=''
      const {data: res} = await getRecordNodeList(row.id)
      this.recordNode = res.data

      this.drawerSwitch = true;
      this.drawerTitle = '查看'

      this.datailForm.platform = row.platform;
      if (row.platform == 'tiktok') {
        this.registeredAreaName='主体注册地'
        this.industryList = this.ttIndustryList
        this.areaList=this.ttNationList
        this.multiple=false
        this.datailForm.industry = this.industryList.find(item => item.dictKey == row.industry)['dictValue']
        this.datailForm.registeredArea = row.registeredArea;
      }
      else if (row.platform == 'bigo') {
        this.registeredAreaName='投放地区'
        this.industryList = this.bigoIndustryList
        this.areaList=this.bigoNationList
        this.multiple=true
        this.datailForm.registeredArea = row.registeredArea.split(',');
        this.datailForm.industry=row.industry
        // this.datailForm.industry = this.industryList.find(item => item.dictKey == row.industry)['dictValue']
      }
      else if (row.platform == 'kwai') {
        this.registeredAreaName='投放地区'
        this.areaList=this.kwaiNationList
        this.multiple=true
        this.datailForm.registeredArea = row.registeredArea.split(',');
        this.datailForm.industry=row.industry.split(',')
      }

      debugger

      this.datailForm.customerName = row.customerName;
      this.datailForm.customerFullName = row.customerFullName;
      this.datailForm.entityName = row.entityName
      this.datailForm.customerId = row.customerId;
      if(row.timezone != ''){
        this.datailForm.timezone = row.timezone;
      }else{
        this.datailForm.timezone=''
      }
      this.datailForm.baseName = row.baseName;
      this.datailForm.number = row.number;
      this.datailForm.licenseNo = row.licenseNo;
      this.datailForm.money = row.money;
      this.datailForm.appLink = row.appLink;
      this.datailForm.licenseImage = row.licenseImage
      this.datailForm.tableData = row.relativeAccounts
      this.datailForm.prepareRechargeAmount = row.prepareRechargeAmount
      this.datailForm.status = row.status
      //新增四家开户
      this.datailForm.geoLimit = row.geoLimit;
      this.datailForm.fbAppId = row.fbAppId;
      // this.datailForm.registeredArea = row.registeredArea;
      this.datailForm.accountType = row.accountType;
      this.datailForm.websiteScreenshot = row.websiteScreenshot;
      this.datailForm.remarks = row.remarks;
      this.datailForm.currency=row.currency
      if(row.accessory==''){
        this.datailForm.annexList=[]
      }else{
        this.datailForm.annexList = row.accessory.split(',');
      }
      // this.datailForm.registeredArea=row.registeredArea
      // const {data: {data: res}} = await detailAccount(row.id)
      // this.detailAccountList = res
      // console.log('detailAccountList',this.detailAccountList)
    },


    async getAccountList(params = {}) {
      // this.loading = true
      try {
        this.query.status = this.StatusSelection.checked1
        const {data: res} = await getAccountList(this.query, this.page)
        this.loading = false
        this.total = res.data.total
        this.AccountList = res.data.records
      } catch (e) {
        this.loading = false
        console.error(e)
      }
      // console.log(this.query)
    },
    async getCreateUserList() {
      const {data: {data: res}} = await getCreateUser()
      this.createUserList = res
      // console.log('wrwdffsdfsdfsdfsa',this.createUserList)
    },
    async getCustomerList() {
      const {data: res} = await getCustomer()
      this.customerList = res.data.map(item => {
        return {
          value: item.key,
          label: item.name,
          fullName: item.fullName,
        }
      })
      // console.log('aaaaaaaaaaaaaaa',this.customerList)
    },
    findDept(val) {
      try {
        if(val == -1) throw ''
        else  throw this.deptList.find(item => item.value === val)['label']

      } catch (e) {
        return e
      }

    },
    getNation(){
      getTiktokGeoList().then(res => {
        this.ttNationList = res.data.data
        this.ttNationList.forEach(item => {
          item.dictValue = item.dictValue + "(" + item.dictKey + ")"
        })
      })
      getBigoGeoList().then(res => {
        this.bigoNationList = res.data.data
      })
      getKwaiGeoList().then(res => {
        this.kwaiNationList = res.data.data
      })
    },
    // getNationList() {
    //   getSysDictList("nation").then((map) => {
    //     this.nationList = map['nation'];
    //   });
    //   console.log('112233',this.nationList)
    // },
    //新增
    // save(){
    //
    //   if (this.fileList  == null || this.fileList.length == 0) {
    //     this.$message.error("请上传营业执照");
    //     return;
    //   }
    //   if(!this.$refs.beeltesUpload.uploadCompleted()) {
    //     this.$message.error("营业执照尚未上传完成");
    //     return;
    //   }
    //   this.$refs.reportForm.validate(async (valid) => {
    //     console.log(valid)
    //     if (valid) {
    //       // alert('submit!');
    //       const {data: res} = await save(this.getReportForm())
    //       console.log('保存', res)
    //       if (res.code !== 200) return this.$message.error('保存失败')
    //       this.$message.success('保存成功')
    //       await this.getAccountList()
    //       this.drawerSwitch = false
    //       this.btnLock = false
    //     } else {
    //       console.log('error submit!!');
    //       return false;
    //     }
    //   });
    //
    // },
    async save1() {
      let dynamicItem=[]
      this.auditForm.dynamicItem.forEach(item => {
        if (item.account_id !='' && item.account_name !='' && item.agency_name !=''){
          dynamicItem.push(item)
        }
        item.status = 4
      })
      if (this.radio === '2' && this.rejectReason === '') {
        this.$message.warning('请输入拒绝原因')
        return
      }
      if (this.radio === '4') {
        if(dynamicItem.length === 0){
          this.$message.warning('注意：账户名称，账户ID,代理必填一个')
          return
        }
      }
      if(this.radio === '3' && this.datailForm.platform == 'tiktok'){
        if(this.bcId == ''){
          this.$message.warning('注意：必须指定商务中心')
          return
        }
      }
      this.loading = true
      // this.btnLock = true
      console.log(this.bcId)
      const {data: res} = await auditSubmit(this.datailForm.id, this.rejectReason, this.radio,
        dynamicItem,this.bcId).finally(() => this.loading = false)
      this.getAccountList()
      if (res.code !== 200){
        return this.$message.error(res.msg)
        this.$message.success('保存成功')
        await this.getAccountList()
        this.drawerSwitch = false
        this.btnLock = false
        this.loading = false
      }
      else {
        this.drawerSwitch=false
        console.log('error submit!!');
        return false;
      }

    },
    editOrCopyReport(row) {
      console.log(row)
      this.getBcSelect()
      this.drawerTitle = '审核'
      this.bcId=''
      this.drawerSwitch = true
      this.rejectReason = ''
      this.radio ='3'
      this.btnLock = false
      this.datailForm.platform = row.platform;
      this.datailForm.id = row.id;
      if (row.platform == 'tiktok') {
        this.registeredAreaName='主体注册地'
        this.industryList = this.ttIndustryList
        this.areaList=this.ttNationList
        this.multiple=false
        this.datailForm.industry = this.industryList.find(item => item.dictKey == row.industry)['dictValue']
        this.datailForm.registeredArea = row.registeredArea;
      }
      else if (row.platform == 'bigo') {
        this.registeredAreaName='投放地区'
        this.industryList = this.bigoIndustryList
        this.areaList=this.bigoNationList
        this.multiple=true
        this.datailForm.registeredArea = row.registeredArea.split(',');
        // this.datailForm.industry = this.industryList.find(item => item.dictKey == row.industry)['dictValue']
      }
      else if (row.platform == 'kwai') {
        this.registeredAreaName='投放地区'
        this.areaList=this.kwaiNationList
        this.multiple=true
        this.datailForm.registeredArea = row.registeredArea.split(',');
      }
      this.datailForm.customerName = row.customerName;
      this.datailForm.customerId = row.customerId;
      this.datailForm.customerFullName = row.customerFullName;

      // this.datailForm.timezone = this.timeZoneList.find(item => item.dictKey === row.timezone)['dictValue'];
      // this.datailForm.registeredArea = row.registeredArea;
      this.datailForm.baseName = row.baseName;
      this.datailForm.number = row.number;
      this.datailForm.entityName = row.entityName
      this.datailForm.licenseNo = row.licenseNo;
      if(row.timezone != '' && row.platform != 'kwai'){
        this.datailForm.timezone =row.timezone
      }else{
        this.datailForm.timezone=''
      }
      // this.datailForm.industry = this.industryList.find(item => item.dictKey == row.industry)['dictValue']
      this.datailForm.currency = row.currency
      this.datailForm.appLink = row.appLink;
      this.datailForm.licenseImage = row.licenseImage
      this.datailForm.prepareRechargeAmount = row.prepareRechargeAmount
      this.datailForm.status = row.status
      //新增四家开户
      this.datailForm.geoLimit = row.geoLimit;
      this.datailForm.fbAppId = row.fbAppId;
      // this.datailForm.registeredArea = row.registeredArea;
      this.datailForm.accountType = row.accountType;
      this.datailForm.currency = row.currency;
      this.datailForm.websiteScreenshot = row.websiteScreenshot;
      this.datailForm.remarks = row.remarks;
      if(row.accessory==''){
        this.datailForm.annexList=[]
      }else{
        this.datailForm.annexList = row.accessory.split(',');
      }
      //媒体通过审核回显
      row.relativeAccounts.forEach((item)=>{
        if(item.agency_name==''){
          item.agency_name='Ads4each'
        }else if(!item.agency_name){
          item['agency_name']='Ads4each'
        }
      })
      this.$set( this.auditForm,'dynamicItem',row.relativeAccounts)
      // this.auditForm.dynamicItem=row.relativeAccounts
    },
    async getIndustry() {
      let res = await getTiktokIndustry()
      this.ttIndustryList = res.data.data
      res = await getBigoIndustryList()
      this.bigoIndustryList = res.data.data
      res = await getKwwaiIndustryList()
      this.kwaiIndustryList=res.data.data
    },

    cancel() {
      this.drawerSwitch = false
      this.drawerSwitch1 = false
    },
    async getTimeZone() {
      const {data: {data: res}} = await getTimeZone()
      this.timeZoneList = res
    },
    async getWorkrooms() {
      getWorkrooms().then(res => {
        let dept_data = res.data.data
        dept_data.forEach(item => {
          this.deptList.push({value:item.id,label:item.deptName})
        })
      })
    }
  },
  async mounted() {
    await this.getAccountList()
    await this.getIndustry()
    await this.getTimeZone()
    await this.getWorkrooms()
  },

  computed: {
    calculationAudit(){
      const arr = [];
      for (let i = 1; i <= this.datailForm.number; i++) {
        arr.push({
          id: '',
          account_id: '',
          account_name: '',
          status:''
        });
      }
      let  data={
        arr
      }
      return data;
    },
    filterQueryOptions() {
      return [
        {
          value: 'customerName',
          label: '客户简称',
        },{
        value: 'entityName',
        label: '主体名称',
      }, {
        value: 'productName',
        label: '产品名称',
      },
        //新增媒体团队
        {
          value: 'platforms',
          label: '媒体',
          children: this.mediaList
        },{
          value: 'teams',
          label: '团队',
          children: this.deptList
        }
      ];
    },
  },

}

</script>

<style lang="scss" scoped>
.card-header {
  .header-title {
    float: left;
    font-size: 16px;
    font-weight: bold;
  }

  .header-right {
    float: right;
  }
}

::v-deep .el-card__header {
  border-bottom: unset;
}

.curd-table {
  .tab-header {
    font-size: 14px;
    margin-bottom: 15px;

    .tab-header-left {
      float: left;

      & > * {
        margin-right: 15px;
      }
    }

    .tab-header-right {
      float: right;
    }
  }

  .bottom-page {
    margin-top: 15px;
    margin-bottom: 50px;

    .el-pagination {
      float: right;
    }
  }
}

.el-transfer {
  height: 100%;
  display: -webkit-box;

  /deep/ .el-transfer-panel {
    height: 100%;

    .el-transfer-panel__body {
      height: 100%;

      .el-transfer-panel__list {
        height: 100%;
      }
    }
  }
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.add-form {
  padding: 0 25px;

  .add-title {
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
  }
}


.setstyle {
  min-height: 200px;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  cursor: default !important;
}

.el-select, .el-date-editor {
  width: 100%;
}

.cs-button {
  cursor: pointer;
  font-size: 16px;
}

.active {
  color: #409EFF;
}

.disabled {
  cursor: default !important;
}

#message-box {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;

  #avatar {
    padding: 5px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
  }

  #message {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;

    .message-item {
      padding: 5px 15px;
      background-color: #EEE;
      border-radius: 5px;
    }
  }
}



.annexDemo{
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}
.rightullidiv {
  margin:0px 0px 15px 15px;
  width: 200px;
  height: 200px;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position:relative;
  .rightulliimg {
    max-width: 200px;
    max-height: 200px;
  }
}
.rightullidiv:hover {
  cursor: pointer;
}
.rightullidiv:hover::after {
  content: '';
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  left: 0;
  height: 100%;
  top: 0px;
  width: 100%;
  z-index: 99;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
}
.rightullidiv i{
  display: none;
}
.rightullidiv:hover i {
  position: absolute;
  font-size: 30px;
  display:initial;
  z-index: 999;
  color: #fff;
  top: 40%;
}

</style>

